<template>
  <!-- 这里布局 -->
  <ScaleContainer>
    <!-- 头部插槽 -->
    <template #header>
      <div class="header-content">
        <span class="header-title">{{ title }}</span>
        <slot name="header-extra" />
      </div>
    </template>
    <DateLins class="top-date"></DateLins>
    <!-- 左中右主体 -->
    <div class="layout-container">
      <aside class="left-side" v-if="$route.name === 'Home'">
        <slot name="left" />
      </aside>

      <main class="center-area" v-if="$route.name === 'Home'">
        <slot name="center" />
      </main>

      <aside class="right-side" v-if="$route.name === 'Home'">
        <slot name="right" />
      </aside>
      <slot></slot>
    </div>
  </ScaleContainer>
</template>

<script setup>
import DateLins from "@/views/components/DateLins.vue";
import { useRoute } from "vue-router";
defineProps({
  title: {
    type: String,
    default: "莘县惠昌建材公司数据平台",
  },
  letterSpacing: {
    type: String,
    default: "0.2em",
  }
});

const $route = useRoute();

console.log(
  "%c [  ]-47",
  "font-size:18px; background:#b6c9fb; color:#faffff;",
  $route.name
);
</script>

<style scoped lang="scss">
.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  color: #fff;
  .header-title {
    font-family: "YouSheBiaoTiHei-2";
    font-size: 48px;
    font-weight: 600;
    text-align: center;
    letter-spacing: v-bind("letterSpacing");
    color: #ffffff;
    text-shadow: 0px 0px 10px #1368e1;
  }
}

.layout-container {
  display: flex;
  margin: 32px 20px 0 20px;
  height: 100%;
  // border: 1px solid #1368e1;
}

.left-side {
  width: 460px;
  // border: 1px solid #1368e1;
}

.center-area {
  flex: 1;
  overflow: hidden;
}

.right-side {
  width: 460px;
  // border: 1px solid #1368e1;
}
</style>
